<template>
  <el-page-header @back="goBack">
    <template #content>
      <div
        class="flex items-center"
        style="display: flex; align-items: center; margin-bottom: 5px"
      >
        <el-avatar
          :size="30"
          class="mr-3"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
        <span class="text-large font-600 mr-3"
          >设备编号 {{ monitor.deviceData.code }}
        </span>
        <span class="text-large font-600 mr-3 color"
          >{{
            monitor.deviceData.state === 0
              ? "离线"
              : monitor.deviceData.state === 1
              ? "在线"
              : monitor.deviceData.state === 2
              ? "未激活"
              : "已退回"
          }}
        </span>
      </div>
    </template>
    <!-- <template #extra>
      <div class="flex items-center">
        <el-button>Print</el-button>
        <el-button type="primary" class="ml-2">Edit</el-button>
      </div>
    </template> -->
  </el-page-header>
</template>
<script lang="ts" setup>
import { ref, onUnmounted, onMounted, provide, toRaw } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useBackendMonitor } from "@/store/backend/EquipM/monitor";

const router = useRouter();
const route = useRoute();
const monitor = useBackendMonitor();

const statusColor = ref("");
//后退
const goBack = () => {
  router.back();
};
//持续在单个设备详情页面实时获取数据进行更新
onMounted(() => {
  monitor.$patch((state) => {
    // state.loading = false;
  });
});
</script>
<style lang="scss" scoped>
.color {
  color: v-bind(
    'monitor.deviceData.state===0?"#909399":monitor.deviceData.state===1?"#409eff":monitor.deviceData.state === 3?"orange":"red"'
  );
}
</style>
